<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"> 

    <ui:composition template="/template/base.xhtml">
        <ui:define name="content">

            <p:panel header="Alumnos">
                <h:form id="alumno-form">
                    <p:growl id="growl" showDetail="true"/>
                    <p:panelGrid columns="2" columnClasses="column">

                        <p:outputLabel value="Nombre" for="nombre" />
                        <p:inputText id="nombre" 
                                     required="true"
                                     value="#{alumnoBean.nombre}" 
                                     requiredMessage="El nombre es requerido"/>

                        <p:outputLabel value="Apellido" for="apellido" />
                        <p:inputText id="apellido" 
                                     required="true"
                                     value="#{alumnoBean.apellido}" 
                                     requiredMessage="El apellido es requerido" />
                        <p:outputLabel value="Tipo Documento" for="tDocumento" />
                        <p:selectOneMenu id="tDocumento" value="#{alumnoBean.tipoDocumento}"
                                         converter="tipoDocumentoConverter">
                            <c:forEach var="documento" items="#{tipoDocumentoBean.listDocumento}">
                                <f:selectItem itemValue="#{documento}"
                                              itemLabel="#{documento.descripcion}" />
                            </c:forEach>
                        </p:selectOneMenu>

                        <p:outputLabel value="Número" for="numero" />
                        <p:inputText id="numero" value="#{alumnoBean.documento}" />

                        <p:outputLabel value="Fecha de nacimiento" for="edad" />
                        <p:calendar id="edad" 
                                    required="true"
                                    requiredMessage="El campo fecha de nacimiento es obligatorio"
                                    readonlyInput="true"
                                    yearRange="c-99:c0" 
                                    showOn="button" 
                                    pattern="dd/MM/yyyy"
                                    navigator="true" value="#{alumnoBean.fechaNac}" />

                        <p:outputLabel value="Sexo" for="sexo" />
                        <p:selectOneRadio id="sexo" 
                                          required="true"
                                          requiredMessage="El campo sexo es obligatorio"
                                          value="#{alumnoBean.sexo}">
                            <f:selectItem itemLabel="M" itemValue="M" />
                            <f:selectItem itemLabel="F" itemValue="F" />
                        </p:selectOneRadio>

                        <p:outputLabel value="Telefóno" for="telefono" />
                        <p:inputText id="telefono" value="#{alumnoBean.telefono}" />

                        <p:outputLabel value="Ciudad" for="ciudad" />
                        <p:selectOneMenu id="ciudad" value="#{alumnoBean.ciudad}"
                                         converter="ciudadConverter">
                            <c:forEach var="ciudad" items="#{ciudadBean.ciudades}">
                                <f:selectItem itemValue="#{ciudad}"
                                              itemLabel="#{ciudad.descripcion}" />
                            </c:forEach>
                        </p:selectOneMenu>

                        <p:outputLabel value="Dirección" for="direccion" />
                        <p:inputText id="direccion" value="#{alumnoBean.direccion}" />

                        <p:outputLabel value="Email" for="email" />
                        <p:inputText id="email" placeholder="example@domain.com"
                                     value="#{alumnoBean.email}" />

                        <p:outputLabel value="Institución" for="institucion" />
                        <p:selectOneMenu id="institucion"
                                         value="#{alumnoBean.institucion}" converter="institucionConverter">
                            <c:forEach var="inst" items="#{institucionBean.instituciones}">
                                <f:selectItem itemValue="#{inst}"
                                              itemLabel="#{inst.descripcion}" />
                            </c:forEach>
                        </p:selectOneMenu>
                        <h:panelGroup>
                            <p:commandButton icon="ui-icon-search" title="Buscar padre" type="button" onclick="PF('searchPadres').show();" />
                            <p:commandButton icon="ui-icon-plus" title="Añadir padre" type="button" onclick="PF('dlgPadres').show();" />
                        </h:panelGroup>
                        <h:panelGroup>    
                            <p:commandButton type="submit" value="Guardar" action="#{alumnoBean.save}" update=":alumno-form"/>
                            <p:commandButton process="@form" immediate="true" value="Cancelar" action="#{alumnoBean.clear}"  />
                        </h:panelGroup>

                    </p:panelGrid>
                </h:form>
                <p:panel header="Lista de Padres o encargados" rendered="true" id="pnlPadres">
                    <p:dataTable var="padre" value="#{alumnoBean.padreList}" emptyMessage="No se registró aún una persona responsable para el alumno">
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Nombre" />
                            </f:facet>
                            <h:outputText value="#{padre.persona.nombre}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Apellido" />
                            </f:facet>
                            <h:outputText value="#{padre.persona.apellido}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Dirección" />
                            </f:facet>
                            <h:outputText value="#{padre.persona.direccion.descripcion}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Telefono" />
                            </f:facet>
                            <h:outputText value="#{padre.persona.telefono}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Email" />
                            </f:facet>
                            <h:outputText value="#{padre.persona.email}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Accion" />
                            </f:facet>
                            <h:form>
                                <p:commandButton actionListener="#{alumnoBean.removePadre(padre)}" icon="ui-icon-close" value="quitar" title="Quitar padre" update=":pnlPadres"/>
                            </h:form>
                        </p:column>
                    </p:dataTable>
                </p:panel>

            </p:panel>

            <p:dialog header="Añdir responsable" id="padres"
                      widgetVar="dlgPadres" dynamic="true" closeOnEscape="true" closable="true">
                <ui:include src="/secure/padres_gird.xhtml" />
            </p:dialog>

            <p:dialog header="Filtrar responsable" widgetVar="searchPadres" modal="true" closable="true">
                <h:form>
                    <p:panelGrid columns="2">
                        <p:outputLabel value="Nombre" for="nombre"/>
                        <p:inputText id="nombre" value="#{alumnoBean.padre.nombre}"/>

                        <p:outputLabel value="Apellido" for="apellido"/>
                        <p:inputText id="apellido" value="#{alumnoBean.padre.apellido}"/>

                        <p:outputLabel value="Tipo de documento" for="tipoDocu" />
                        <p:selectOneMenu id="tipoDocu" value="#{alumnoBean.padre.tipoDocumento}" converter="tipoDocumentoConverter">
                            <c:forEach var="tipo" items="#{tipoDocumentoBean.listDocumento}">
                                <f:selectItem itemValue="#{tipo}"
                                              itemLabel="#{tipo.descripcion}" />
                            </c:forEach>
                        </p:selectOneMenu>

                        <p:outputLabel value="Nro. de documento" for="nro"/>
                        <p:inputText id="nro" value="#{alumnoBean.padre.documento}"/>
                        <p:spacer />
                        <p:commandButton value="Buscar" actionListener="#{alumnoBean.searchPadres}" icon="ui-icon-search" />

                    </p:panelGrid>
                </h:form>
            </p:dialog>

            <p:dialog header="Padres encontrados" 
                      id="padresList"
                      widgetVar="dlgPadresList" 
                      dynamic="true" 
                      modal="true" 
                      closable="true">
                <h:form id="form">
                    <p:dataTable var="padreList" 
                                 value="#{alumnoBean.padreListSearch}"
                                 selection="#{alumnoBean.padreModel}"
                                 rowKey="#{padreList}"
                                 selectionMode="single">
                        <p:ajax event="rowSelect" listener="#{alumnoBean.onRowPadre}"/>
                        <p:column headerText="ID">
                            #{padreList.id}
                        </p:column>
                        <p:column headerText="Nombre">
                            #{padreList.persona.nombre}
                        </p:column>
                        <p:column headerText="Apellido">
                            #{padreList.persona.apellido}
                        </p:column>
                        <p:column headerText="Documento">
                            #{padreList.persona.tipoDocumentoId.descripcion}
                        </p:column>
                        <p:column headerText="Número">
                            #{padreList.persona.documento}
                        </p:column>
                    </p:dataTable>
                </h:form>
            </p:dialog>

        </ui:define>
        <ui:define name="footer">

        </ui:define>
    </ui:composition>

</html>